<template>
	<view>
		<view v-if="isLogin===0">
			<view class="login-container">
				<!-- 提示登录的图标 -->
				<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
				<!-- 登录按钮 -->
				<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
				<button type="primary" class="btn-login" open-type="getUserInfo" @tap="login">一键登录</button>
				<!-- 登录提示 -->
				<view class="tips-text">登录后尽享更多权益</view>
			</view>
		</view>
		<view v-else>
			<view class="my-userinfo-container">
				<!-- 头像昵称区域 -->
				<view class="top-box">
					<image :src="result.data.userPhoto || result.userPhoto" class="avatar" @tap="updatePhoto"></image>
					<view class="nickname">{{result.userName||result.data.userName}}</view>
				</view>
			</view>

			<!-- 信息 -->
			<view class="personInfo">
				<view class="tittle">用户资料</view>
				<view class="Info">
					<view class="infoItem">
						<text>{{result.data.userName||result.userName}}
							{{result.data.userSex||result.userSex}}/{{result.data.userBrith||result.userBrith}}</text>
					</view>
					<view class="infoItem">
						<text>{{result.data.userAddress||result.userAddress}}</text>
					</view>
					<view class="infoItem">
						<text>{{result.data.userIntroduce || result.userIntroduce}}</text>
					</view>
				</view>
			</view>

			<view class="ListInfo">
				<view class="titleall">
					<view class="tittle">创建的歌单</view>
					<view class="titleTu">
						<u-icon name="plus" color="#2979ff" size="20" @tap="goAdd(result.data.userId||result.userId)">
						</u-icon>
					</view>
				</view>
				<view class="listItem" v-for="item in list" :key="item.listId">
					<image class="im" :src="item.listPhoto"></image>
					<view class="textItem">
						<view><text class="t1">{{item.listTittle}}</text></view>
						<view><text class="t2">{{item.listStyle}}</text></view>
					</view>
				</view>
				<view class="chakan">
					<u-divider lineColor="gray"></u-divider>
					<view>
						<text class="t3" @click="gosonglist(result.data.userId||result.userId)">查看更多</text>
					</view>
				</view>
			</view>

			<view class="ListInfo">
				<view class="titleall">
					<view class="tittle">收藏的歌单</view>
				</view>
				<view class="listItem" v-for="item in Likelist" :key="item.listId">
					<image class="im" :src="item.listPhoto"></image>
					<view class="textItem">
						<view><text class="t1">{{item.listTittle}}</text></view>
						<view><text class="t2">{{item.userName}}</text></view>
					</view>
				</view>
				<view class="chakan">
					<u-divider lineColor="gray"></u-divider>
					<view>
						<text class="t3" @click="golistlike(result.data.userId||result.userId)">查看更多</text>
					</view>
				</view>
			</view>
			<view class="btn1">
				<button type="primary" @tap="update()">修改个人信息</button>
			</view>
			<view class="btn2">
				<button type="warn" @tap="logout">退出登录</button>
			</view>

		</view>
		<view>
			<TabBar currentTab="mine"></TabBar>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				result: JSON.parse(uni.getStorageSync('userinfo') || '{}'),
				list: [],
				Likelist: [],
				src: "http://rrrlkahbf.hb-bkt.clouddn.com/photo/%E7%BD%B2%E5%89%8D%E8%A1%97%E5%B0%91%E5%B9%B4.jpg",
				isLogin: 0
			};
		},
		computed: {
			...mapState("user", ['userInfo'])
		},
		methods: {
			...mapMutations('user', ['updateUserInfo', 'updateToken']),
			login() {

				console.log(this.token);
				let that = this
				uni.showLoading({
					title: "微信登陆中"
				})
				wx.getUserProfile({
					desc: "登录验证",
					success(res1) {
						console.log(res1);
						uni.login({
							provider: 'weixin',
							success(res2) {
								console.log(res2);
								const res = uni.request({
									url: "http://124.221.244.228:8089/user/login",
									method: 'POST',
									data: {
										code: res2.code,
										nickName: res1.userInfo.nickName,
										gender: res1.userInfo.gender == 0 ? "男" : "女",
										userPhoto: res1.userInfo.avatarUrl
									}
								})
								res.then(res1 => {
									that.result = res1[1].data
									that.token = that.result.data.userId
									// console.log(res1[1].data);
									if (res1[1].data.code == "200") {
										that.getListThree(res1[1].data.data.userId)
										that.getLikeThree(res1[1].data.data.userId)
										uni.showToast({
											duration: 800,
											title: "微信登录成功",
											position: 'center'
										})
										that.isLogin = 1
										//保存在缓存
										console.log("yonghuxinxi");
										console.log(that.result.data);
										that.updateUserInfo(that.result.data)
										console.log("user");
										console.log(that.$store.state.userInfo);
										that.updateToken(that.token)
									} else {
										uni.showToast({
											duration: 800,
											title: "微信登录失败",
											position: 'center',
											icon: 'error'
										})
									}
								})
							},
							fail() {
								console.log("获取信息失败");
							}
						})
					}
				})
				uni.hideLoading();
			},
			async getListThree(item) {
				console.log(item);
				const {
					data: res
				} = await uni.$http.get("/list/findThree?id=" + item)
				this.list = res.data
			},
			async getLikeThree(item) {
				console.log("item" + item);
				const {
					data: res
				} = await uni.$http.get("/list/findMyListLike?id=" + item)
				console.log(res);
				this.Likelist = res.data
			},
			gosonglist(item) {
				uni.navigateTo({
					url: '/subpkg/songlist/songlist?listId=' + item
				})
			},
			updatePhoto(){
				uni.navigateTo({
					url:"/subpkg/updatePhoto/updatePhoto"
				})
			},
			golistlike(item) {
				uni.navigateTo({
					url: '/subpkg/songlist/songlist?likelistId=' + item
				})
			},
			goAdd(item) {
				uni.navigateTo({
					url: "/subpkg/AddList/AddList?userId=" + item
				})
			},
			getToken() {
				let that = this
				uni.getStorage({
					key: "token",
					success(res) {
						that.isLogin = 1
						uni.getStorage({
							key: "userinfo",
							success(res) {
								let js = JSON.parse(res.data)
								console.log(js.userId)
								that.getLikeThree(js.userId);
								that.getListThree(js.userId)
							}
						})
					},
					fail(res) {
						console.log(res.errMsg);
					}
				})
			},
			logout() {
				let that = this
				// console.log("logout");
				uni.removeStorage({
					key: "token",
					success() {
						that.isLogin = 0
						uni.removeStorage({
							key: "userinfo",
							success() {
								uni.showToast({
									duration: 500,
									icon: 'success',
									title: "退出成功",
								})
							}
						})
					}
				})
			},
			update() {
				uni.navigateTo({
					url: "/subpkg/updatePerson/updatePerson"
				})
			}
		},
		onLoad() {
			this.getToken()
		},
		onPullDownRefresh() {
			this.getToken()
			this.result = this.userInfo
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.login-container {
		// 登录盒子的样式
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;

		// 绘制登录盒子底部的半椭圆造型
		&::after {
			content: ' ';
			display: block;
			position: absolute;
			width: 100%;
			height: 40px;
			left: 0;
			bottom: 0;
			background-color: white;
			border-radius: 100%;
			transform: translateY(50%);
		}

		// 登录按钮的样式
		.btn-login {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}

		// 按钮下方提示消息的样式
		.tips-text {
			font-size: 12px;
			color: gray;

		}
	}

	.my-userinfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;


		.top-box {
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #0093E9;
			background-image: linear-gradient(124deg, #0093E9 0%, #80D0C7 33%, #448a7d 66%, #ffffff 100%);


			.avatar {
				display: block;
				width: 90px;
				height: 90px;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0 1px 5px black;
			}

			.nickname {
				color: white;
				font-weight: bold;
				font-size: 16px;
				margin-top: 10px;
			}
		}
	}

	.personInfo {
		height: 300rpx;
		background-color: #f0f0f0;
		border-radius: 20px;
		margin: 0rpx 20rpx;
		transform: translateY(-20px);
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .2);
	}

	.tittle {
		margin: 30rpx 40rpx;
		font-size: 35rpx;
		font-weight: 600;
	}

	.Info {
		color: #5c5c5c;
		font-size: 30rpx;
		margin: 0rpx 50rpx;
	}

	.infoItem {
		margin: 10rpx 0rpx;
	}

	.ListInfo {
		position: relative;
		height: 655rpx;
		background-color: #f0f0f0;
		border-radius: 20px;
		margin: 40rpx 20rpx;
		transform: translateY(-20px);
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .2);
	}

	.listItem {
		display: flex;
		margin: 15rpx 30rpx;

		.im {
			height: 130rpx;
			width: 130rpx;
			border-radius: 20rpx;
		}

		.textItem {
			height: 90rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			justify-items: center;
			margin-top: 18rpx;
			margin-left: 30rpx;

			.t1 {
				font-size: 36rpx;
				font-weight: 500;
			}

			.t2 {
				color: #5c5c5c;
			}
		}

	}

	.chakan {
		font-size: 45rpx;
		color: #5c5c5c;
		line-height: 40rpx;
		position: absolute;
		text-align: center;
		bottom: 20rpx;
		width: 100%;
	}

	.titleall {
		display: flex;
		justify-content: space-between;
	}

	.titleTu {
		display: flex;
		// justify-content: center;
		justify-items: center;
		margin: 0 20rpx;
	}

	.btn1 {
		margin: 30rpx 40rpx;
	}

	.btn2 {
		margin: 30rpx 40rpx;
	}
</style>
